Cypress: La Guía Definitiva de Pruebas de Extremo a Extremo para Aplicaciones Web

En el panorama del desarrollo web que evoluciona rápidamente hoy en día, asegurar la calidad y fiabilidad de las aplicaciones web es primordial. Las pruebas de Extremo a Extremo (E2E) juegan un papel crucial en la verificación de que todos los componentes de una aplicación funcionan juntos sin problemas desde la perspectiva del usuario. Cypress ha surgido como un framework de pruebas E2E líder, que ofrece una experiencia amigable para el desarrollador, características potentes y un rendimiento excelente. Esta guía completa lo guiará a través de todo lo que necesita saber para comenzar con Cypress y probar eficazmente sus aplicaciones web.

¿Qué es Cypress?

Cypress es una herramienta de pruebas front-end de próxima generación construida para la web moderna. A diferencia de los frameworks de pruebas tradicionales que ejecutan pruebas en un navegador, Cypress opera directamente en el navegador, brindándole un control y visibilidad sin precedentes sobre el comportamiento de su aplicación. Está diseñado para ser rápido, fiable y fácil de usar, lo que lo convierte en una opción popular entre los desarrolladores e ingenieros de control de calidad de todo el mundo. Cypress está escrito en JavaScript y se ejecuta dentro del navegador, lo que lo hace muy eficiente y ofrece un acceso sin precedentes a los elementos internos de la aplicación.

Beneficios clave de usar Cypress

• Amigable para el desarrollador: Cypress proporciona una API limpia e intuitiva, lo que facilita la escritura y depuración de pruebas.
• Viaje en el tiempo: Cypress toma instantáneas del estado de su aplicación durante cada comando de prueba, lo que le permite retroceder en el tiempo y ver exactamente lo que sucedió en cualquier momento.
• Recargas en tiempo real: Cypress se recarga automáticamente cuando realiza cambios en sus pruebas, proporcionando retroalimentación instantánea.
• Espera automática: Cypress espera automáticamente a que los elementos se vuelvan visibles o interactuables antes de realizar acciones, eliminando la necesidad de esperas explícitas.
• Control de red: Cypress le permite simular peticiones y respuestas de red, lo que le permite simular diferentes escenarios y probar el manejo de errores de su aplicación.
• Depuración: Cypress proporciona excelentes herramientas de depuración, incluido un potente depurador y mensajes de error detallados.
• Pruebas entre navegadores: Cypress es compatible con varios navegadores, incluidos Chrome, Firefox, Edge y Electron.
• Pruebas sin interfaz: Ejecute pruebas en modo sin interfaz para una ejecución más rápida en entornos CI/CD.
• Afirmaciones integradas: Cypress proporciona un rico conjunto de afirmaciones integradas para verificar el comportamiento esperado de su aplicación.

Instalación y configuración

Comenzar con Cypress es sencillo. Aquí le mostramos cómo instalarlo:

1. Requisitos previos: Asegúrese de tener Node.js y npm (Administrador de paquetes de nodos) instalados en su sistema. Puede descargarlos del sitio web oficial de Node.js.
2. Instalar Cypress: Abra su terminal o símbolo del sistema, navegue hasta el directorio de su proyecto y ejecute el siguiente comando:

            npm install cypress --save-dev
            

              
                Copy
              
            
          

3. Abrir Cypress: Una vez que se complete la instalación, puede abrir el Ejecutor de pruebas de Cypress ejecutando:

            npx cypress open
            

              
                Copy
              
            
          

Este comando iniciará el Ejecutor de pruebas de Cypress, que proporciona una interfaz gráfica para ejecutar y depurar sus pruebas.

Escribiendo su primera prueba Cypress

Creemos una prueba simple para verificar que la página de inicio de un sitio web se cargue correctamente. Cree un nuevo archivo llamado `example.cy.js` en el directorio `cypress/e2e` de su proyecto.

            
// cypress/e2e/example.cy.js

describe('Mi primera prueba', () => {
  it('Visita el Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

            

              
                Copy
              
            
          

Desglosemos esta prueba:

• `describe()`: Define un conjunto de pruebas, que es una colección de pruebas relacionadas.
• `it()`: Define un caso de prueba individual dentro del conjunto de pruebas.
• `cy.visit()`: Navega a la URL especificada.
• `cy.contains()`: Encuentra un elemento que contiene el texto especificado.
• `.click()`: Hace clic en el elemento seleccionado.
• `cy.url()`: Obtiene la URL actual de la página.
• `.should()`: Hace una afirmación sobre el estado de la aplicación.
• `cy.get()`: Selecciona un elemento usando un selector CSS.
• `.type()`: Escribe texto en el elemento seleccionado.
• `.should('have.value', 'fake@email.com')`: Afirma que el valor del elemento es igual a 'fake@email.com'.

Ejecute esta prueba en el Ejecutor de pruebas de Cypress para verla en acción. Debería ver el navegador navegar al sitio web Cypress Kitchen Sink, hacer clic en el enlace "type" y verificar la URL.

Comandos de Cypress

Cypress proporciona una amplia gama de comandos para interactuar con su aplicación. Aquí hay algunos de los comandos más utilizados:

• `cy.visit(url)`: Navega a la URL especificada.
• `cy.get(selector)`: Selecciona un elemento usando un selector CSS.
• `cy.contains(content)`: Selecciona un elemento que contiene el texto especificado.
• `cy.click()`: Hace clic en el elemento seleccionado.
• `cy.type(text)`: Escribe texto en el elemento seleccionado.
• `cy.clear()`: Borra el contenido de un elemento de entrada o de área de texto.
• `cy.submit()`: Envía un formulario.
• `cy.check()`: Marca una casilla de verificación o un botón de radio.
• `cy.uncheck()`: Desmarca una casilla de verificación.
• `cy.select(value)`: Selecciona una opción de un menú desplegable.
• `cy.scrollTo(position)`: Desplaza la página a la posición especificada.
• `cy.trigger(event)`: Activa un evento DOM en el elemento seleccionado.
• `cy.request(url, options)`: Realiza una solicitud HTTP a la URL especificada.
• `cy.intercept(route, handler)`: Intercepta solicitudes HTTP que coinciden con la ruta especificada.
• `cy.wait(time)`: Espera la cantidad de tiempo especificada.
• `cy.reload()`: Vuelve a cargar la página actual.
• `cy.go(direction)`: Navega a la página anterior o siguiente en el historial del navegador.
• `cy.url()`: Obtiene la URL actual de la página.
• `cy.title()`: Obtiene el título de la página.
• `cy.window()`: Obtiene el objeto window.
• `cy.document()`: Obtiene el objeto document.
• `cy.viewport(width, height)`: Establece el tamaño de la ventana gráfica.

Estos son solo algunos de los muchos comandos disponibles en Cypress. Consulte la documentación de Cypress para obtener una lista completa de comandos y sus opciones.

Afirmaciones en Cypress

Las afirmaciones se utilizan para verificar el comportamiento esperado de su aplicación. Cypress proporciona un rico conjunto de afirmaciones integradas que puede usar para verificar el estado de los elementos, la URL, el título y más. Las afirmaciones se encadenan después de los comandos de Cypress usando el método `.should()`.

Aquí hay algunos ejemplos comunes de afirmaciones:

• `.should('be.visible')`: Afirma que un elemento es visible.
• `.should('not.be.visible')`: Afirma que un elemento no es visible.
• `.should('be.enabled')`: Afirma que un elemento está habilitado.
• `.should('be.disabled')`: Afirma que un elemento está deshabilitado.
• `.should('have.text', 'texto esperado')`: Afirma que un elemento tiene el texto especificado.
• `.should('contain', 'texto esperado')`: Afirma que un elemento contiene el texto especificado.
• `.should('have.value', 'valor esperado')`: Afirma que un elemento tiene el valor especificado.
• `.should('have.class', 'clase esperada')`: Afirma que un elemento tiene la clase especificada.
• `.should('have.attr', 'nombre del atributo', 'valor esperado')`: Afirma que un elemento tiene el atributo y el valor especificados.
• `.should('have.css', 'propiedad css', 'valor esperado')`: Afirma que un elemento tiene la propiedad CSS y el valor especificados.
• `.should('have.length', longitud esperada)`: Afirma que un elemento tiene la longitud especificada (por ejemplo, el número de elementos en una lista).

También puede crear afirmaciones personalizadas para satisfacer sus necesidades específicas.

Mejores prácticas para escribir pruebas Cypress

Seguir las mejores prácticas puede ayudarle a escribir pruebas Cypress más fáciles de mantener, fiables y eficientes. Aquí hay algunas recomendaciones:

• Escriba pruebas claras y concisas: Cada prueba debe centrarse en una funcionalidad o escenario específico. Evite escribir pruebas demasiado complejas que sean difíciles de entender y mantener.
• Utilice nombres de pruebas significativos: Dé a sus pruebas nombres descriptivos que indiquen claramente qué están probando.
• Evite codificar valores de forma rígida: Utilice variables o archivos de configuración para almacenar valores que puedan cambiar con el tiempo.
• Utilice comandos personalizados: Cree comandos personalizados para encapsular la lógica reutilizable y hacer que sus pruebas sean más legibles.
• Aísle las pruebas: Cada prueba debe ser independiente de otras pruebas. Evite depender del estado de la aplicación de pruebas anteriores.
• Limpie después de las pruebas: Restablezca el estado de la aplicación después de cada prueba para asegurarse de que las pruebas posteriores comiencen desde una base limpia.
• Utilice atributos de datos: Utilice atributos de datos (por ejemplo, `data-testid`) para seleccionar elementos en sus pruebas. Es menos probable que los atributos de datos cambien que las clases o ID de CSS, lo que hace que sus pruebas sean más resistentes a los cambios en la interfaz de usuario.
• Evite las esperas explícitas: Cypress espera automáticamente a que los elementos se vuelvan visibles o interactuables. Evite usar esperas explícitas (por ejemplo, `cy.wait()`) a menos que sea absolutamente necesario.
• Pruebe los flujos de usuarios: Concéntrese en probar los flujos de usuarios en lugar de componentes individuales. Esto le ayudará a asegurarse de que su aplicación funcione correctamente desde la perspectiva del usuario.
• Ejecute pruebas con regularidad: Integre las pruebas de Cypress en su canalización de CI/CD y ejecútelas con regularidad para detectar errores al principio del proceso de desarrollo.

Técnicas avanzadas de Cypress

Stubbing y Mocking

Cypress le permite simular peticiones y respuestas de red, lo que le permite simular diferentes escenarios y probar el manejo de errores de su aplicación. Esto es particularmente útil para probar funciones que se basan en API o servicios externos.

Para simular una petición de red, puede utilizar el comando `cy.intercept()`. Por ejemplo, el código siguiente simula una petición GET a `/api/users` y devuelve una respuesta simulada:

            
cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

            

              
                Copy
              
            
          

A continuación, puede esperar la petición interceptada usando `cy.wait('@getUsers')` y verificar que su aplicación maneje la respuesta simulada correctamente.

Trabajar con almacenamiento local y cookies

Cypress proporciona comandos para interactuar con el almacenamiento local y las cookies. Puede usar estos comandos para establecer, obtener y borrar el almacenamiento local y las cookies en sus pruebas.

Para establecer un elemento de almacenamiento local, puede utilizar el comando `cy.window()` para acceder al objeto window y luego usar el método `localStorage.setItem()`. Por ejemplo:

            
cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

            

              
                Copy
              
            
          

Para obtener un elemento de almacenamiento local, puede utilizar el comando `cy.window()` y luego usar el método `localStorage.getItem()`. Por ejemplo:

            
cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

            

              
                Copy
              
            
          

Para establecer una cookie, puede utilizar el comando `cy.setCookie()`. Por ejemplo:

            
cy.setCookie('myCookie', 'myCookieValue')

            

              
                Copy
              
            
          

Para obtener una cookie, puede utilizar el comando `cy.getCookie()`. Por ejemplo:

            
cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

            

              
                Copy
              
            
          

Manejo de cargas de archivos

Cypress proporciona un plugin llamado `cypress-file-upload` que simplifica las cargas de archivos en sus pruebas. Para instalar el plugin, ejecute el siguiente comando:

            npm install -D cypress-file-upload
            

              
                Copy
              
            
          

A continuación, agregue la siguiente línea a su archivo `cypress/support/commands.js`:

            
import 'cypress-file-upload';

            

              
                Copy
              
            
          

A continuación, puede utilizar el comando `cy.uploadFile()` para cargar un archivo. Por ejemplo:

            
cy.get('input[type="file"]').attachFile('example.txt')

            

              
                Copy
              
            
          

Trabajar con IFrames

Probar IFrames puede ser complicado, pero Cypress proporciona una forma de interactuar con ellos. Puede usar el comando `cy.frameLoaded()` para esperar a que se cargue un IFrame, y luego usar el comando `cy.iframe()` para obtener el objeto document del IFrame.

            
cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

            

              
                Copy
              
            
          

Cypress e Integración Continua/Implementación Continua (CI/CD)

Integrar Cypress en su canalización de CI/CD es esencial para garantizar la calidad de su aplicación. Puede ejecutar pruebas de Cypress en modo sin interfaz en su entorno de CI/CD. Aquí le mostramos cómo:

1. Instalar Cypress: Asegúrese de que Cypress esté instalado como una dependencia en su proyecto.
2. Configurar CI/CD: Configure su canalización de CI/CD para ejecutar pruebas de Cypress después de cada compilación.
3. Ejecutar Cypress sin interfaz: Use el comando `cypress run` para ejecutar pruebas de Cypress en modo sin interfaz.

Ejemplo de configuración de CI/CD (usando GitHub Actions):

            
name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

            

              
                Copy
              
            
          

Esta configuración ejecutará las pruebas de Cypress cada vez que se envíe código a la rama `main` o se cree una solicitud de extracción contra la rama `main`. La acción `cypress-io/github-action` simplifica el proceso de ejecución de pruebas de Cypress en GitHub Actions.

Depuración de pruebas Cypress

Cypress proporciona excelentes herramientas de depuración para ayudarle a identificar y solucionar problemas en sus pruebas. Aquí hay algunos consejos para depurar pruebas Cypress:

• Use el Ejecutor de pruebas de Cypress: El Ejecutor de pruebas de Cypress proporciona una interfaz visual para ejecutar y depurar sus pruebas. Puede recorrer sus pruebas un comando a la vez, inspeccionar el estado de la aplicación y ver mensajes de error detallados.
• Use el comando `cy.pause()`: El comando `cy.pause()` pausa la ejecución de su prueba y le permite inspeccionar el estado de la aplicación en las herramientas de desarrollo del navegador.
• Use el comando `cy.debug()`: El comando `cy.debug()` imprime el elemento seleccionado en la consola, lo que le permite inspeccionar sus propiedades y atributos.
• Utilice las herramientas de desarrollo del navegador: Las herramientas de desarrollo del navegador proporcionan una gran cantidad de información sobre su aplicación, incluyendo el DOM, las peticiones de red y los registros de la consola.
• Lea los mensajes de error cuidadosamente: Cypress proporciona mensajes de error detallados que pueden ayudarle a identificar la causa del error. Preste atención al mensaje de error y al rastreo de la pila.

Cypress vs. Otros frameworks de pruebas

Si bien Cypress es un potente framework de pruebas de extremo a extremo, es esencial comprender cómo se compara con otras opciones populares. Aquí hay una breve descripción general:

• Selenium: Selenium es un framework de pruebas de automatización ampliamente utilizado. Aunque es flexible y compatible con varios lenguajes, puede ser complejo de configurar y mantener. Cypress ofrece una experiencia más sencilla y amigable para el desarrollador, particularmente para aplicaciones basadas en JavaScript.
• Puppeteer: Puppeteer es una biblioteca de nodos que proporciona una API de alto nivel para controlar Chrome o Chromium sin interfaz. Es excelente para el raspado y la automatización de tareas del navegador, pero puede requerir una configuración más manual en comparación con Cypress para las pruebas de extremo a extremo.
• Playwright: Playwright es otro framework de automatización entre navegadores desarrollado por Microsoft. Comparte similitudes con Puppeteer, pero ofrece una compatibilidad con navegadores más amplia. Cypress tiene un depurador de viaje en el tiempo único y una experiencia de prueba más integrada.

La elección del framework depende de las necesidades y requisitos específicos de su proyecto. Cypress es una excelente opción para las aplicaciones web modernas que requieren pruebas de extremo a extremo rápidas, fiables y amigables para los desarrolladores.

Ejemplos del mundo real de Cypress en acción

Exploremos algunos ejemplos del mundo real de cómo se puede usar Cypress para probar diferentes tipos de aplicaciones web:

Prueba de una aplicación de comercio electrónico

Puede usar Cypress para probar varios flujos de usuarios en una aplicación de comercio electrónico, como:

• Búsqueda de productos
• Añadir productos al carrito
• Pagar y realizar un pedido
• Gestionar la configuración de la cuenta

Aquí hay un ejemplo de una prueba Cypress que verifica que un usuario puede agregar un producto a su carrito con éxito:

            
it('Añade un producto al carrito', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

            

              
                Copy
              
            
          

Prueba de una aplicación de redes sociales

Puede usar Cypress para probar las interacciones del usuario en una aplicación de redes sociales, como:

• Crear una nueva publicación
• Dar a me gusta a una publicación
• Comentar una publicación
• Seguir a otros usuarios

Aquí hay un ejemplo de una prueba Cypress que verifica que un usuario puede crear una nueva publicación con éxito:

            
it('Crea una nueva publicación', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('¡Hola, mundo!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', '¡Hola, mundo!')
})

            

              
                Copy
              
            
          

Prueba de una aplicación bancaria

Para las aplicaciones bancarias, Cypress se puede usar para probar funcionalidades críticas como:

• Iniciar sesión de forma segura
• Comprobar los saldos de las cuentas
• Transferir fondos
• Gestionar beneficiarios

Una prueba para verificar una transferencia de fondos podría verse así (con la simulación apropiada para la seguridad):

            
it('Transfiere fondos con éxito', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

            

              
                Copy
              
            
          

Conclusión

Cypress es un potente y versátil framework de pruebas de extremo a extremo que puede ayudarle a garantizar la calidad y fiabilidad de sus aplicaciones web. Su API amigable para el desarrollador, sus potentes funciones y su excelente rendimiento lo convierten en una opción popular entre los desarrolladores e ingenieros de control de calidad de todo el mundo. Al seguir las mejores prácticas descritas en esta guía, puede escribir pruebas Cypress eficaces que le ayudarán a detectar errores al principio del proceso de desarrollo y a ofrecer software de alta calidad a sus usuarios.

A medida que las aplicaciones web continúan evolucionando, la importancia de las pruebas de extremo a extremo solo aumentará. Adoptar Cypress e integrarlo en su flujo de trabajo de desarrollo le permitirá crear experiencias web más sólidas, fiables y fáciles de usar.